<template>
	<div id="roleConfig">
		<el-row style="margin-bottom: 20px;">
			<el-col :span="12" style="line-height:33px;">模板信息</el-col>
			<el-col :span="12" style="text-align: right">
				<el-button
					size="small"
					type="primary"
					icon="el-icon-plus"
					@click="dialogFormVisible = true"
					>新增</el-button
				>
			</el-col>
		</el-row>
		<Table
			:tableData="tableData"
			:tableHead="tableHead"
			:isUseSlot="false"
			:page="listQuery.page"
			:limit="listQuery.limit"
			v-loading="listLoading"
		>
			<template slot="tool" slot-scope="{ data }">
				<el-button
					style="padding:3px;"
					icon="el-icon-document"
					@click="handleEdit(data.row)"
					type="text"
					>编辑</el-button
				>
				<el-button
					style="color:red;padding:3px;"
					icon="el-icon-delete"
					type="text"
					@click="delet(data.row)"
					>删除</el-button
				>
			</template>
		</Table>
		<Pagination
			v-show="total > 0"
			:total="total"
			:page.sync="listQuery.page"
			:limit.sync="listQuery.limit"
			@pagination="getList"
		></Pagination>

		<el-dialog
			title="模板信息"
			:visible.sync="dialogFormVisible"
			@close="closeHandle"
		>
			<el-form
				:model="tempInfo"
				:rules="rules"
				size="small"
				ref="tempInfo"
				label-width="120px"
			>
				<el-form-item label="报警类型" prop="alarmType">
					<el-select
						v-model="tempInfo.alarmType"
						placeholder="请选择"
					>
						<el-option
							v-for="item in alarmTypeList"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						>
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="">
					<el-button
						@click="inputTem(btn)"
						style="margin: 4px"
						v-for="(btn, i) in btns"
						:key="i"
						>{{ btn.name }}</el-button
					>
				</el-form-item>
				<el-form-item label="报警模板" prop="alertDiscribe">
					<el-input
						@focus="inputIsAlarm = true"
						type="textarea"
						maxlength="200"
						show-word-limit
						:autosize="{ minRows: 6, maxRows: 6 }"
						placeholder="请输入报警模板"
						v-model="tempInfo.alertDiscribe"
					>
					</el-input>
				</el-form-item>
				<el-form-item label="解除报警模板" prop="offAlertDiscribe">
					<el-input
						@focus="inputIsAlarm = false"
						type="textarea"
						maxlength="200"
						show-word-limit
						:autosize="{ minRows: 6, maxRows: 6 }"
						placeholder="请输入解除报警模板"
						v-model="tempInfo.offAlertDiscribe"
					>
					</el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="submit">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import Table from "@/components/Table";
import Pagination from "@/components/Pagination"; // 分页
import {
	getTemplateList,
	InsertTemplate,
	getTemplate,
	UpdateTemplate,
	getAlarmType
} from "@/api/RCIM/RCIM-systemConfig";
import VForm from "@/components/luyiming/VueEleForm/index.vue";
import { DeleteTemplate } from "@/api/RCIM/RCIM-delet";
import {
	validFormTemplateIsUse,
} from '@/utils/validateForm';
export default {
	components: {
		Table,
		Pagination,
		VForm
	},
	data() {
		return {
			tableData: [],
			tableHead: [
				{
					prop: "alarmType",
					label: "报警类型",
					width: "",
					align: "center"
				},
				{
					prop: "alertDiscribe",
					label: "报警描述",
					width: "",
					align: "center"
				},
				{
					prop: "offAlertDiscribe",
					label: "解除报警描述",
					width: "",
					align: "center"
				},
				{
					prop: "operate",
					label: "操作",
					width: "",
					align: "center"
				}
			],
			tempInfo: {
				alarmType: "",
				alertDiscribe: "",
				offAlertDiscribe: ""
			},
			rules: {
				alarmType: [
					{
						required: true,
						message: "请选择报警类型",
						trigger: "change"
					},
					{
						validator: validFormTemplateIsUse,
						trigger: "change"
					}
				],
				alertDiscribe: [
					{
						required: true,
						message: "请输入报警模板",
						trigger: "blur"
					}
				],
				offAlertDiscribe: [
					{
						required: true,
						message: "请输入解除报警模板",
						trigger: "blur"
					}
				]
			},
			alarmTypeList: [],
			btns: [
				{
					name: "企业名称"
				},
				{
					name: "源库名称"
				},
				{
					name: "设备名称"
				},
				{
					name: "监控因子"
				},
				{
					name: "人员"
				},
				{
					name: "视频地址"
				},
				{
					name: "视频端口"
				},
				{
					name: "视频账号"
				},
				{
					name: "视频密码"
				},
				{
					name: "视频路数"
				},
				{
					name: "日期"
				},
				{
					name: "时间"
				},
				{
					name: "核素名"
				},
				{
					name: "源标签"
				},
				{
					name: "异常值"
				},
				{
					name: "异常类型"
				}
			],
			listLoading: false,
			inputIsAlarm: true,
			total: 0,
			listQuery: {
				page: 1,
				limit: 10
			},
			editInfo: {},
			dialogFormVisible: false,
			oldtempInfo: {}
		};
	},
	created() {
		this.getList();
		this.getAlarmType();
	},
	methods: {
		/**
		 * @desc 删除数据
		 * @param {Object} row 表格行数据
		 */
		delet(row) {
			this.$confirm("确认要删除吗？")
				.then(_ => {
					DeleteTemplate(row.id).then(res => {
						if (res.code === 200) {
							this.getList();
							return this.$message({
								type: "success",
								message: "删除成功"
							});
						}
						return this.$message({
							type: "error",
							message: "删除失败"
						});
					});
				})
				.catch(_ => {});
		},
		/**
		 * @desc 获取表格数据
		 */
		async getList() {
			const { data } = await getTemplateList(this.listQuery);
			this.tableData = data.templateList;
			this.total = data.total;
		},
		/**
		 * @desc 表单下拉框数据
		 */
		getAlarmType() {
			getAlarmType().then(res => {
				this.alarmTypeList = res;
			});
		},
		/**
		 * @desc 编辑表格数据
		 * @param {Object} row 表格行数据
		 */
		handleEdit(row) {
			this.editInfo = row;
			this.dialogFormVisible = true;
			getTemplate({ id: row.id }).then(res => {
				this.$nextTick(() => {
					this.tempInfo = res.data.data;
					this.oldtempInfo = res.data.data;
				});
			});
		},
		/**
		 * @desc 新增、编辑数据
		 */
		submit() {
			this.$refs["tempInfo"].validate((valid,err) => {
				if (this.tempInfo.id) {
					if(!valid && !(err.alarmType && Object.keys(err).length === 1)) return;
					this.dialogFormVisible = false;
					let formData = this.tempInfo;
					this.update(formData);
				} else {
					if (!valid) return;
					this.dialogFormVisible = false;
					let formData = this.tempInfo;
					InsertTemplate(formData).then(res => {
						this.getList();
						if (res.code === 200) {
							return this.$message({
								type: "success",
								message: "添加成功"
							});
						}
						return this.$message({
							type: "success",
							message: "添加失败"
						});
					});
				}
			});
		},
		/**
		 * @desc 编辑数据
		 * @param {Object} params 表单数据
		 */
		update(params) {
			// params.id = this.editInfo.id;
			UpdateTemplate(params).then(res => {
				this.getList();
				if (res.code === 200) {
					return this.$message({
						type: "success",
						message: "修改成功"
					});
				}
				return this.$message({
					type: "success",
					message: "修改失败"
				});
			});
		},
		/**
		 * @desc 关闭弹窗回调
		 */
		closeHandle() {
			this.tempInfo = {
				alarmType: "",
				alertDiscribe: "",
				offAlertDiscribe: ""
			};
		},
		/**
		 * @desc 点击按钮回调
		 * @param {Object} btn 按钮值
		 */
		inputTem(btn) {
			// 短信模板替换
			const tempStr = MSG_INFO.MSG_RULE.replace("**", btn.name);
			// 内容赋值
			this.inputIsAlarm
				? (this.tempInfo.alertDiscribe += tempStr)
				: (this.tempInfo.offAlertDiscribe += tempStr);
		}
	}
};
</script>

<style lang="scss" scoped>
#roleConfig {
	height: calc(100vh - 144px);
	overflow: hidden;
	padding: 30px 50px;
	/deep/ {
		.el-form-item__label {
			font-weight: normal;
		}
	}
}
</style>
